<script lang="ts" setup>
import {
    FolderOpened,
    Microphone,
    Picture
} from '@element-plus/icons-vue'
import type { UploadInstance } from 'element-plus'
import { ref } from 'vue'
import { type, friendId } from "@/stores/friend"
import { userId } from "@/stores/user"
import axios from 'axios'
import { useChatRecordingStore } from '@/stores/chatRecording'
import { isAudio } from '@/stores/loading'

const chatRecordingStore = useChatRecordingStore()
const uploadRef = ref<UploadInstance>()


function handleSuccess(file: File, response: any) {
  if(type.value === "user"){
    chatRecordingStore.getChatRecordingList()
  }
  else{
    chatRecordingStore.getGroupChatRecordingList()
  }
}

const url = ref('')
function beforeUnloadEvent(file: File) {
  if(type.value === "user"){
    url.value = 'https://47.120.69.214:8787/chat/sendMessageToUser'
  }
  else{
    url.value = 'https://47.120.69.214:8787/chat/sendMessageToGroup'
    console.log('group')
  }
}

const sendType = ref('')

</script>

<template>
    
    <div id="chatInterface_sendType">
        <el-menu
    class="el-menu-demo"
    mode="horizontal"
    style="height:5vh;left:1%"
  >
  <el-upload
    ref="uploadRef"
    class="upload-demo"
    :action=url
    :before-upload="beforeUnloadEvent"
    :on-success="handleSuccess"
    :data="{ 'messageType' : sendType , 'sendUserId' : userId, 'receiveUserId' : friendId }"
    name="multipartFile"
  >
    <template #trigger>
    <el-menu-item index="1" style="height:4vh; width:3vw; margin-top:5%; padding: 0%;" @click="sendType = 'file'">
      <el-icon style="top:-10%; left:20%"><FolderOpened/></el-icon>
    </el-menu-item>
    <el-menu-item index="1" style="height:4vh; width:3vw; margin-top:5%; padding: 0%;" @click="sendType = 'picture'">
      <el-icon style="top:-10%; left:20%"><Picture/></el-icon>
    </el-menu-item>
    </template>
    </el-upload>
    <el-menu-item index="3" style="height:4vh; width:3vw; margin-top:0%; padding: 0%;" @click="isAudio ? isAudio = false : isAudio = true">
      <el-icon style="margin-top:0%; left:0%"><Microphone /></el-icon>
    </el-menu-item>
  </el-menu>
    </div>

</template>
